body{
    .main{
        height: 100%;
        width: 100%;
        .top_head{
            height: 300px;;
            width: 100%;
            background: #4294ff;
            h2{
                padding: 0 4%;
            }
            .myhead{
                height: 70px;
                width: 90%;
                margin: 10px auto;
                .myhead_l{
                  color: white;
                  font-weight: bold;
                }
                .myhead_r{
                    height: 70px;
                    width: 70px;
                    border-radius: 50%;
                    background: white;
                    .img{
                        height: 70px;
                        width: 70px;
                        border-radius: 50%;
                    }
                }
            }
            // 运动数据
             .sport_data{
            height: 100px;
            background: #4294ff;
            padding: 0 5%;
            // 下面仔细数据部分
            .all_data{
                height:100px;
                .sport_time{
                    height: 100%;
                    width: 50%;
                    border-right: 1px dashed white;
                    position: relative;
                   
                    .sp_title{
                        color: #aad3f9;
                        font-weight: bold;
                        font-size: 17px;
                    }
                    .times_box{
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        font-size: 13px;
                        color: white;
                        .data_comm{
                            font-size: 50px;
                            color: white;
                        }
                    }
                }
                .sport_ca{
                    height: 100%;
                    width: 50%;
                    padding-left: 3%;
                    position: relative;
                    .sp_title{
                        color: #aad3f9;
                        font-weight: bold;
                        font-size: 17px;
                    }
                    .ca_box{
                        position: absolute;
                        left: 3%;
                        bottom: 0;
                        font-size: 13px;
                        color: white;
                        .data_comm{
                            font-size: 50px;
                            color: white;
                        }
                    }
                }
            }
              }
              .ca_day{
                  height: 50px;
                  width: 90%;
                  margin: 20px auto 0;
                  .ca{
                    height: 50px; 
                    width: 80px;
                  }
                  .day{
                    height: 50px; 
                    width: 70px;
                  }
                  .total_day{
                    height: 50px; 
                    width: 70px;
                  }
              }
              
        }
      }
        
   .bar_box{
       height: 250px;
       width: 90%;
       margin: auto;
       border: 1px solid #aaa;
       border-radius: 15px;
       box-shadow: 5px 5px 5px #aaaa;
       margin-top: 10px;
        #bar{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
     }
     .pie_box{
        height: 250px;
        width: 90%;
        margin: auto;
        border: 1px solid #aaa;
        border-radius: 15px;
        box-shadow: 5px 5px 5px #aaaa;
        margin-top: 10px;
         #pie{
             height: 100%;
             width: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
         }
      }

} 
